body{
    background-color: green;
    margin: 0;
}
.container{
    width: 232px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
    
}

.balll{
    width: 100px;
    height: 100px;
    border: 8px solid #000;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
.facel{
    width: 70px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 30px;
}
.eye{
    width: 15px;
    height: 14px;
    border-bottom: 5px solid #000;
    border-radius: 50%;
    position: absolute;
}
.eye-l{
    left: 10px;
}
.eye-r{
    right: 5px;
}
.mouth{
    width: 30px;
    height: 14px;
    border-bottom: 5px solid #000;
    border-radius: 50%;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -5px;
}

.facel::before{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: #badc58;
    position: absolute;
    right: -8px;
    top: 20px;
}
.facel::after{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: #badc58;
    position: absolute;
    left: -5px;
    top: 20px;
}

#l-ball{
    animation: close 4s ease infinite;
}

@keyframes close{
    0%{
        transform: translate(0);
    }
    20%{
        transform: translate(20px);
    }
    35%{
        transform: translate(20px);
    }
    55%{
        transform: translate(0);
    }
    100%{
        transform: translate(0);
    }
}

.face-l{
    animation: face 4s ease infinite;
}

@keyframes face{
    0%{
        transform: translate(0) rotate(0);
    }
    10%{
        transform: translate(0) rotate(0);
    }
    20%{
        transform: translate(5px) rotate(-2deg);
    }
    28%{
        transform: translate(0) rotate(0);
    }
    35%{
        transform: translate(5px) rotate(-2deg);
    }
    50%{
        transform: translate(0) rotate(0);
    }
    100%{
        transform: translate(0) rotate(0);
    }
}
.ballr{
    width: 100px;
    height: 100px;
    border: 8px solid #000;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
.facer{
    width: 70px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 30px;
    border: 1px solid #000;
}
.facer::before{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: #badc58;
    position: absolute;
    right: -8px;
    top: 20px;
}
.facer::after{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: #badc58;
    position: absolute;
    left: -5px;
    top: 20px;
}
.eyer{

    width: 15px;
    height: 14px;
    border-top: 5px solid #000;
    border-radius: 50%;
    position: absolute;
}
.eye-rl{
    left: 10px;
}
.eye-rr{
    right: 5px;
}
.mouth-r{
    width: 30px;
    height: 14px;
    border-bottom: 5px solid #000;
    border-radius: 50%;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -5px;
}